import React, { Component } from 'react';
import { Table, Button, Space, Card, Drawer, Tree } from 'antd';

import api from '../../api/api';
import { connect } from 'react-redux';
import { addAuthAsync } from '../../redux/roles/actions';

class Roles extends Component {
  state = {
    roles: [],
    visible: false,
    treeData: [
      {
        title: '首页',
        key: '/home',
      },

      {
        title: '用户管理',
        key: '/users',
      },

      {
        title: '角色管理',
        key: '/roles',
      },

      {
        title: '商品管理',
        key: '/products',
        children: [
          {
            title: '商品分类',
            key: '/products/categories',
          },

          {
            title: '商品列表',
            key: '/products/products-list',
          },
        ],
      },

      {
        title: '财务管理',
        key: '/finances',
        children: [
          {
            title: '交易流水',
            key: '/finances/transaction',
          },

          {
            title: '销售业绩',
            key: '/finances/sales-performance',
          },
        ],
      },
    ],
    auth: { id: '', authTime: '2022-01-18', authUser: 'laoWang', menus: [] },
  };

  async findRoles() {
    let { data: res } = await api.rolesAPIs.findRoles();
    // console.log(res);
    this.setState({
      roles: res.data,
    });
  }

  componentDidMount() {
    this.findRoles();
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  onCheck = (checkedKeys, info) => {
    this.setState({
      auth: { ...this.state.auth, menus: checkedKeys },
    });
  };

  addAuth = () => {
    // console.log(this.props);
    // console.log(this.state.auth);
    this.props.dispatch(addAuthAsync(this.state.auth));
    this.setState({ visible: false });
  };

  render() {
    const columns = [
      {
        title: '角色名字',
        dataIndex: 'name',
        key: '_id',
      },
      {
        title: '创建日期',
        dataIndex: 'createTime',
        key: '_id',
      },
      {
        title: '授权人',
        dataIndex: 'authUser',
        key: '_id',
      },

      {
        title: '授权日期',
        dataIndex: 'authTime',
        key: '_id',
      },

      {
        title: '操作',
        key: '_id',
        render: (text, record) => (
          <Space size="middle">
            <Button>删除</Button>
            <Button
              onClick={() => {
                this.setState({
                  auth: {
                    ...this.state.auth,
                    id: record._id,
                  },
                });
                this.showDrawer();
              }}
            >
              授权
            </Button>
          </Space>
        ),
      },
    ];

    const { roles, visible, treeData } = this.state;

    return (
      <Card title="角色管理">
        <Drawer
          title="权限设置"
          placement="right"
          onClose={this.onClose}
          visible={visible}
          extra={
            <Button type="primary" onClick={this.addAuth}>
              确认授权
            </Button>
          }
        >
          <Tree
            checkable
            defaultExpandAll
            // defaultExpandedKeys={['0-0-0', '0-0-1']}
            // defaultSelectedKeys={['0-0-0', '0-0-1']}
            // defaultCheckedKeys={['0-0-0', '0-0-1']}
            onSelect={this.onSelect}
            onCheck={this.onCheck}
            treeData={treeData}
          />
        </Drawer>

        <Table
          bordered={true}
          loading={roles.length ? false : true}
          rowKey="_id"
          columns={columns}
          dataSource={roles}
          pagination={{ pageSize: 5 }}
        />
      </Card>
    );
  }
}

const mapStateToProps = state => {
  // console.log(state);
  return {};
};
export default connect(mapStateToProps)(Roles);
